<template>
  <div class="event_detail">
    <!--弹出流转详情对话框-->
    <div class="lz_detail_dialog" v-if="flag">

      <div class="lz_dialog">
        <div class="dialog_top"><span>流转详情</span><span @click="close">×</span></div>
        <div class="dialog_bottom">
          <!--网格长-->
          <div class="lz_user">
            <span class="lz_left" style="letter-spacing: 9px;">处理人:</span><span class="text_content">{{currentItem.handle_name}}</span>
          </div>
          <!--网格长-->
          <!--补充内容-->
          <div class="lz_content">
            <span class="lz_left">补充内容:</span><span class="text_content">{{currentItem.content}}</span>
          </div>
          <!--补充内容-->
          <!--图片材料-->
          <div class="lz_cailiao">
            <span class="lz_left">图片材料:</span>
            <div class="text_content">
              <img :src="image" alt="暂无图片资源" style="width: 416px;height: 422px;" v-for="image in currentItem.attach">
            </div>

          </div>
          <!--图片材料-->

        </div>
      </div>

    </div>
    <!--弹出流转详情-->
    <Banner></Banner>
    <mainContent catname="事件详情">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + this.$util.storage.get('menu_bg') + ')'}">事件详情</dt>
        </dl>
      </div>
      <div slot="inner_content" style="box-sizing: border-box;">
        <div class="detail_region">
          <!--轨迹地图-->
          <div class="detail">
            <!--各种情况以及信息-->
            <div class="detail_list">
              <div class="detail_list_left">
                <!--事件情况-->
                <div class="e_qingkuan">
                  <div class="e_top">
                    事件情况
                  </div>
                  <div class="e_bottom">

                    <div class="row_type">
                      <div class="row_type_left">
                        <div class="el_desc"> 事件编号：</div>
                        <div class="el_message"><span class="desc_text">{{info.code}}</span></div>
                      </div>

                      <div class="e_person_box">
                        <div class="el_desc"> 当事人：</div>
                        <div class="e_person" style="width:150px"><span class="desc_text">{{info.u_name}}</span></div>
                      </div>
                      <div class="row_type_right">
                        <div class="el_desc"> 事件位置：</div>
                        <div class="el_message"><span class="desc_text">{{info.addr}}</span></div>
                      </div>
                    </div>

                    <div class="row_type">
                      <div class="row_type_left">
                        <div class="el_desc"> 事件类别：</div>
                        <div class="el_message"><span class="desc_text">{{info.utitle}}</span></div>
                      </div>
                      <div class="row_type_right">
                        <div class="el_desc"> 事件等级：</div>
                        <div class="el_message">
                          <span class="desc_text" v-if="info.event_level==1">普通事件</span>
                          <span class="desc_text" v-if="info.event_level==2">重点事件</span>
                        </div>
                      </div>
                    </div>

                    <div class="row_type">
                      <div class="e_bottom_list_type">
                        <div class="el_desc"> 事件内容：</div>
                        <div class="el_messages"><span class="desc_text"
                                                       style="padding-right: 15px">{{info.content}}</span></div>
                      </div>

                      <!--<div v-if="info.attach.length > 0" class="e_bottom_list_type">-->
                      <div v-if="info_flag" class="e_bottom_list_type">
                        <div class="el_desc"> 事前照片：</div>
                        <div class="el_messages2">
                          <img :src="image" @click="prviewImg([image])" alt="暂无图片信息"
                               style="width: 80px;height: 77px;border: 1px solid #000000;" v-for="image in info.attach">
                        </div>
                      </div>
                    </div>




                  </div>
                </div>
                <!--事件情况-->
              </div>

            </div>

            <div class="detail_list">
              <div class="detail_list_left">
                <!--事件情况-->
                <div class="e_qingkuan">
                  <div class="e_top">
                    事件流转
                  </div>
                  <div class="e_bottom2">
                    <table class="table" cellspacing="10" cellpadding="10" >
                      <tr style="height:50px;background: #f3f3f3">
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">处理人</th>
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">操作内容</th>
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">时间</th>
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">描述</th>
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">时限</th>
                        <th style="text-align: center;font-size: 24px;font-weight: bold;">附件</th>
                      </tr>

                      <tr  class="tr_item" v-for="item in logs" style="text-align: center;margin-top: 20px;color: #666;font-size: 20px;">
                        <td class="td_item">{{item.handle_name}}</td>
                        <td class="td_item">{{item.solut}}</td>
                        <td class="td_item">{{item.time}}</td>
                        <td class="td_item">{{item.content}}</td>
                        <td class="td_item">{{item.limit}}</td>
                        <td>
                          <img v-if="item.attach.length!=0" :src="image" @click="prviewImg([image])" alt="暂无图片信息"
                               style="width: 80px;height: 77px;margin-right:10px" v-for="image in item.attach" />
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <!--事件情况-->
              </div>
            </div>
            <!--各种情况以及信息-->
          </div>
          <!--轨迹地图-->
        </div>
      </div>
    </mainContent>
    <MainMenu>
    </MainMenu>
    <footerBar></footerBar>
  </div>
</template>

<script>

  import Banner from '../../../components/bannder/Banner'
  import mainContent from '../../../components/content/mainContent'
  import MainMenu from '../../../components/mainmenu/MainMenu'
  import footerBar from '../../../components/content/footerBar'
  import {ImagePreview} from 'vant';//引入vant预览的组件
  export default {
    name: "EventDetail",
    components: {
      Banner,
      mainContent,
      MainMenu,
      footerBar,
      [ImagePreview.Component.name]: ImagePreview.Component,//局部引入vant的图片预览组件
    },
    data() {
      return {
        flag: false,//是否弹出流转详情，默认不弹出
        id: this.$route.query.id,
        data: {},
        images: [],
        preday: '',
        currentItem: {},
        info:'',
        logs:'',
        info_flag:false,//info的状态
      }
    },
    created() {
      this.getData();
    },

    mounted() {},

    methods: {
      getData() {
        let that = this;
        that.$http.get("/api/Screen/getEventDetail", {id:that.id}, r => {
          console.log('事件详情：',r)
           that.info=r.data.info;
          if (r.data.info.attach.length>0) {
            that.info_flag=true
          }else{
            that.info_flag=false
          }
          that.logs=r.data.logs
        });
      },

      prviewImg(images) {
        console.log('您点击了预览图片！', images);
        ImagePreview(images);
      },


      CheckDetail(item) {
        let that = this;
        console.log('查看详情！');
        that.flag = true;
        that.currentItem = item;
      },
      close() {
        let that = this;
        that.flag = false;
      },

    },
  }
</script>

<style scoped>
  .row_type{
    margin-top:20px;
    display: flex;
  }
  .row_type_left{
    display: flex;
    flex: 1;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
  }
  .title_name{
    font-size: 22px;
    color: #666666;
    width: 126px;
    display: flex;
    align-items: center;
  }
  .data{
    background: #f3f3f3;
    flex: 2.8;
    color: black;
    font-weight: bold;
    font-size: 22px;
    border-radius: 8px;
    display: flex;
    align-items: center;
  }

  .row_type_right{
    display: flex;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
  .detail_region {
    height: 700px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 55px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 30px;
  }

  .detail {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .detail_list {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
  }

  .detail_list_left {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .e_qingkuan {
    width: 1270px;
    padding-bottom: 30px;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 4px 4px 16px #cccccc;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: column;
  }

  .e_top {
    height: 57px;
    line-height: 57px;
    font-size: 22px;
    font-family: 微软雅黑;
    background: #02c070;
    color: white;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  .e_bottom {
    flex: 1;
  }

  .e_bottom_list {
    width: 100%;
    height:50px;
    margin-top: 20px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el_desc {
    /*width: 100px;*/
    font-size: 20px;
    color: #666666;
  }

  .el_message {
    flex: 1;
    border-radius: 8px;
    font-size: 18px;
    color: black;
    display: flex;
    align-items: center;
  }

  .desc_text {
    /*padding-left: 15px;*/
    white-space: pre-wrap;
  }

  .e_bottom_list_type {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
  }

  .el_messages {
    flex: 1;
    border-radius: 8px;
    font-size: 18px;
    color: black;
    display: flex;
    box-sizing: border-box;
  }

  .el_messages2 {
    flex: 1;
    border-radius: 8px;
    font-size: 18px;
    color: black;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .el_messages2 img {
    margin-left: 20px;
  }

  .e_bottom2 {
    flex: 1;
  }
  .table{
    width: 100%;
  }
  .td_item{
    padding: 10px;
  }
.tr_item{
  border-bottom:1px solid #f3f3f3;
}
  .e_person_box{
    flex:1;
    display: flex;
    align-items: center;
  }
  .e_person{
    border-radius: 8px;
    font-size: 20px;
    color: black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .td_item:nth-child(1){
    width:150px;
  }
  .td_item:nth-child(2){
    width:130px;
  }
  .td_item:nth-child(3){
    width:133px;
    font-size: 16px;
  }
  .td_item:nth-child(4){
    width:380px;
  }
  .td_item:nth-child(5) {
    width: 100px;
  }
  .td_item:nth-child(6) {
    padding:10px 0;
  }
</style>
